<template>
  <div id="teamPage">
    <van-search v-model="searchText" placeholder="搜索队伍" @search="onSearch"/>
    <van-button type="primary" @click="doCreateTeam">创建队伍</van-button>
    <TeamCardList :teamList="teamList"/>
    <van-empty v-if="teamList.length <=0" description="数据为空"/>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {TeamUserVO} from "../models/teamUser";
import {ResponseResult} from "../models/resopnse";
import {showFailToast} from "vant";

const router = useRouter()
const doCreateTeam = () => {
  router.push({
    path: '/team/add'
  })
}

const teamList = ref<TeamUserVO[]>([])
const searchText = ref<string>('')

const listTeam = async (val = '') => {
  const res: ResponseResult<TeamUserVO[]> = await myAxios.get('/team/list/my/create', {
    params: {
      searchText: val,
    }
  })
  console.log('res: ', res)
  if (res.code === 0 && res.data) {
    teamList.value = res.data
  } else {
    showFailToast('加载队伍失败')
  }
}

// 页面加载时触发一次
onMounted(() => {
  listTeam()
})
// 搜索
const onSearch = (val: string) => {
  listTeam(val)
}

</script>

<style scoped>

</style>
